<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('uFlow.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" >
            <template #columnPrepend>
                <el-table-column  type="expand">
                    <template #default="props">
                        <el-table :data="props.row.two" :border="false" row-key="id" @row-dblclick="(row:any)=>handleFlowClick(props.row,row,'view')">
                            <el-table-column width="100">
                            </el-table-column>
                            <el-table-column label="明细ID" prop="detailid" />
                            <el-table-column label="步骤序号" prop="period" />
                            <!-- <el-table-column label="费用类型" prop="ITEMCODE" /> -->
                            <el-table-column label="步骤名称" prop="stagename" />
                            <el-table-column label="起止标记" prop="processflag" />
                            <el-table-column label="用户ID" prop="userid" />
                            <el-table-column label="用户" prop="username" />
                            <el-table-column label="操作" >
                                <template #default="scope">
                                    <el-button type="primary" class="table-row-edit table-operate" size="small" @click="handleFlowClick(props.row,scope.row,'edit')">
                                        <i class="fa fa-pencil icon"></i>
                                    </el-button>
                                    <el-popconfirm title="确认删除选中记录?"  @confirm="handleFlowDel(scope.row)">
                                        <template #reference>
                                        <el-button type="danger" class="table-row-delete table-operate" :icon="Delete" size="small" />
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm v-if="baTable.form.operate" />
        <ItemForm  />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted,reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { uFlow ,uFlowdetail,uFlowdetailusers ,dEPARTMENT} from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import ItemForm from './itemForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import createAxios from '/@/utils/axios'
import { ElMessage} from 'element-plus'


const { t } = useI18n()
const tableRef = ref()
const flowData :{
    operate:string
    items:any
} = reactive({
    operate:'',
    items:{
        DETAILID:'',
        PERIOD:''
    },
})
provide('flowData', flowData)
let newButton: any = [
    {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        // 按钮名称
        name: 'info',
        // 鼠标放置时的 title 提示
        title: '新增流程明细',
        // 直接在按钮内显示的文字，title 有值时可为空
        text: '',
        // 按钮类型，请参考 element plus 的按钮类型
        type: 'primary',
        // 按钮 icon
        icon: 'fa fa-plus icon',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: any, field: any) => {
            // flowData.items = row
            // flowData.items = {}
            flowData.items.FLOWID = row.FLOWID||''
            flowData.items.FLOWTYPE = row.FLOWTYPE||''
            flowData.items.LEVEL0 = row.LEVEL0||''
            flowData.items.LEVEL1 = row.LEVEL1||''
            flowData.items.FLOWDEPT = row.FLOWDEPT||''
            flowData.items.FLOWNAME = row.FLOWNAME||''

            flowData.items.DETAILID = undefined
            flowData.items.PERIOD = ''
            flowData.items.STAGENAME = ''
            flowData.items.PROCESSFLAG = ''
            flowData.items.NOTE = ''
            flowData.items.OP = ''
            flowData.items.OPTIME = ''

            flowData.operate = 'add'
        },
        // 按钮是否显示，请返回布尔值
        display: (row: any, field: any) => {
            return true
        },
        attr: {}
    },
]
const optButtons = newButton.concat(defaultOptButtons(["edit","delete"]))  

const baTable = new baTableClass(
    new baTableApi(uFlow),
    {
        pk: 'FLOWID',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('uFlow.FLOWID'), prop: 'FLOWID', align: 'center', operator: 'RANGE' },
            { label: t('uFlow.FLOWNAME'), prop: 'FLOWNAME', align: 'center' },
            { label: t('uFlow.FLOWTYPE'), prop: 'FLOWTYPE', align: 'center' },
            { label: t('uFlow.FLOWDEPT'), prop: 'DEPTNAME', align: 'center',operator:false },
            { label: t('xStockin.DEPT'), prop: 'DEPT', align: 'center',show:false,comSearchRender: 'remoteSelect', remote: {
                pk:'DEPTID',
                field: 'DEPTNAME',
                remoteUrl:dEPARTMENT +'index',
                params: {},
            } },
            { label: t('uFlow.LEVEL0'), prop: 'LEVEL0', align: 'center', operator: 'RANGE' },
            { label: t('uFlow.LEVEL1'), prop: 'LEVEL1', align: 'center', operator: 'RANGE' },
            { label: t('uFlow.NOTE'), prop: 'NOTE', align: 'center' },
            // { label: t('uFlow.OPNAME'), prop: 'OPNAME', align: 'center' },
            // { label: t('uFlow.OPDATETIME'), prop: 'OPDATETIME', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('operate'), align: 'center', width: 130, render: 'buttons', buttons: optButtons, operator: false },
        
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'FLOWID', order: 'desc' },
    },
    {
        defaultItems: [],
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})



const handleFlowClick = (item:any,it:any,type:string)=>{
    flowData.items.FLOWID = item.FLOWID||''
    flowData.items.FLOWTYPE = item.FLOWTYPE||''
    flowData.items.LEVEL0 = item.LEVEL0||''
    flowData.items.LEVEL1 = item.LEVEL1||''
    flowData.items.FLOWDEPT = item.FLOWDEPT||''
    flowData.items.FLOWNAME = item.FLOWNAME||''
    flowData.operate = type
    createAxios({
        url:uFlowdetail + 'edit',
        method:'GET',
        params:{
            DETAILID:it.detailid
        }
    }).then((res:any)=>{
        flowData.items.DETAILID = res.data.row.DETAILID ||''
        flowData.items.PERIOD = res.data.row.PERIOD ||''
        flowData.items.STAGENAME = res.data.row.STAGENAME ||''
        flowData.items.PROCESSFLAG = res.data.row.PROCESSFLAG ||''
        flowData.items.NOTE = res.data.row.NOTE ||''
        flowData.items.OP = res.data.row.OP||''
        flowData.items.OPTIME = res.data.row.OPTIME||''
    })
}
const handleFlowDel = (item:any)=>{
    let url = item.ID?uFlowdetailusers:uFlowdetail
    let ids = item.ID?[item.ID]:[item.detailid]
    createAxios({
        url: url+'del',
        method:'DELETE',
        data:{
            ids
        }
    }).then((res:any)=>{
        ElMessage({
            message:'删除成功',
            type:'success'
        })
        baTable.getIndex()
        flowData.operate = ''
    })
}
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { flow } from 'lodash-es'
export default defineComponent({
    name: 'uFlow',
})
</script>

<style scoped lang="scss"></style>
